<template>
  <section>
    <div class="container">
      <MapMode v-if="mode==='map'" ref="map2"></MapMode>
      <VideoMode v-else-if="showLive && mode==='video'"></VideoMode>
      <ImageMode v-else></ImageMode>
    </div>
    <Toolbar :cfg="toolbarCfg" :mode="mode" :toggle="toggleMode"></Toolbar>
  </section>
</template>

<script>
  import MapMode from 'comp/check/MapMode.vue';
  import VideoMode from 'comp/check/VideoMode.vue';
  import ImageMode from 'comp/check/ImageMode.vue';
  import Toolbar from "comp/common/Toolbar";

  export default {

    name: "Broadcast",
    components: {
      MapMode,
      VideoMode,
      ImageMode,
      Toolbar
    },
    data() {
      return {
        showLive:false,
        mode: 'map',
        toolbarCfg: [
          {
            mode: 'map',
            label: '地图模式',
            icon: WebCfg.icons.map
          },
          {
            mode: 'video',
            label: '视频模式',
            icon: WebCfg.icons.video
          },
          {
            mode: 'image',
            label: '图片模式',
            icon: WebCfg.icons.image
          },
        ],


      }
    },
    mounted() {
      this.$kkui.loading_deepBlue.hide();
    },
    methods: {
      toggleMode(mode) {
        this.mode = mode;
        this.showLive=mode==='video'
      }

    }
  }
</script>

<style scoped>

</style>
